<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition>
<p>The <b>rich:togglePanel</b> is a core component for all switchable panels in RichFaces. It renders 
a sequence of panels based on state that can be switched (toggled) by a behavior 
called <b>rich:toggleControl</b>.  All of these other panels (e.g. tabPanel, accordion, etc...) share 
the basic sets a features defined below.</p>
<p>The <b>switchType</b> attribute defines the strategy used to toggle between panels. The possible values for this attributes are:</p>
<ul>
<li><b>client</b> - switching happens on the client without any request to the server. A jsf form is not required in this mode</li>
<li><b>ajax</b> - when states are switched, the content of new states comes from the server via Ajax requests.</li>
<li><b>server</b> - the whole page is reloaded when states are switched</li>
</ul>
<p>There is also a very useful set of shortcut toggle values that allow you to
create many custom effects like wizards.  See the other switchable panel examples.  
Available shortcuts are defined below:</p>
    <ul>
        <li>@next</li>
        <li>@prev</li>
        <li>@first</li>
        <li>@last</li>
    </ul>
<p> A <b>rich:togglePanel</b> has no default appearance, and allows you to customize it's
look-n-feel any way you like. You create a set of child <b>rich:togglePanelItem</b>'s
with any content you want inside of them. </p>
<p>As the component does not provide any predefined layout it could be used for 
creation of any kind of switchable panels.  This example is a very simple 
tabbed pane organized using that component:</p>
	<ui:include src="#{demoNavigator.sampleIncludeURI}" />
	<ui:include src="/templates/includes/source-view.xhtml">
		<ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" />
		<ui:param name="sourceType" value="xhtml" />
		<ui:param name="openLabel" value="View Source" />
		<ui:param name="hideLabel" value="Hide Source" />
	</ui:include>
</ui:composition>

</html>